import React, { Component } from 'react';
import scss from "./index.module.scss"

class VirtualList extends Component {
	itemHeight = 86    //一个item的高度

	state = {
		dataSource: []
	}

	componentDidMount(): void {
		this.init()
	}

	// 初始化
	init = () => {
		const element = document.getElementById("virtual_page");
		const endIndex = Math.ceil(element.clientHeight / this.itemHeight);
		let data = this.getData().slice(0, endIndex)
		this.loadData(data, 0, endIndex)
	}

	getData = (num = 200) => {
		const data = Array.from(new Array(num), (elm, index) => `当前显示的数据是第${index + 1}条数据`)
		document.getElementById("ul-box").style.height = this.itemHeight * data.length + "px"; // 占位dom的高度
		this.setState({ dataSource: data })
		return data
	}

	// 视口展示区
	loadData = (data, startIndex, endIndex) => {
		let html = "";
		data.forEach(element => {
			html += `
			<li>${element}</li>`;
		});
		document.getElementById("ul").innerHTML = html;
	}

	// 更新视口dom
	updateHtml = (startIndex, endIndex) => {
		const { dataSource } = this.state
		let sliceData = dataSource.slice(startIndex, endIndex);
		let itemAll = document.getElementById("ul").querySelectorAll("li");
		sliceData.forEach((element, i) => {
			itemAll[i].innerHTML = element
		});
		document.getElementById("ul").style.transform = "translateY(" + startIndex * this.itemHeight + "px)";

	}

	onScroll = (el) => {
		const scrollTop = el.nativeEvent.target.scrollTop
		const startIndex = Math.ceil(scrollTop / this.itemHeight)
		const endIndex = startIndex + Math.ceil(document.getElementById("virtual_page").clientHeight / this.itemHeight)
		this.updateHtml(startIndex, endIndex)
	}

	render() {
		return (
			<div id='virtual_page' className={scss['virtual_page']} onScroll={this.onScroll}>
				<div id='ul-box'>
					<ul id="ul"></ul>
				</div>
			</div>
		);
	}
}

export default VirtualList;

// type MapValue = [string | number | (() => void), string | number | (() => void)]

// // 创建一个映射
// const map = new Map()
// const arr: Array<MapValue> = [["name", "胡宇航"], ["age", 22], ["sex", "男"]]
// const person = new Map(arr)
// console.log(person, "初始化");


// //size  返回 Map 结构的成员总数
// console.log(person.size, "size");


//set 设置键名key对应的键值为value，然后返回整个 Map 结构,如果key已经有值，则键值会被更新，否则就新生成该键,可采用链式写法
// const fn = function log() {
// 	console.log("我的名字");
// }

// person.set("家乡", "山西")
// person.set("undefined", undefined)     //键名和值  都可以是undefined
// person.set("函数", fn)				//键名和值  都可以是函数
// person.set(1, 'a').set(2, 'b').set(3, 'c')  	// 可以链式操作
// console.log(person, "set");

// //get  读取key对应的键值,找不到则返回undefined
// console.log(person.get("name"));
// console.log(person.get("函数"));
// console.log(person.get("不存在的"));


// has方法返回一个布尔值，表示某个键是否在当前 Map 对象之中
// person.has("undefined")     // true
// person.has('不存在的')       // false
// person.has("函数")     // true


// delete方法删除某个键，返回true。如果删除失败，返回false
// console.log(person.delete("不存在的"));  //false
// console.log(person.delete("函数"));  //true


// //clear  清空  没有返回值
// person.clear()
// console.log(person, "clear");


